<template>
	<div class="service">
		<h3>我的服务</h3>
		<ul>
			<li v-for="item in list" :key="item.id">
				<router-link to="#">
					<img :src="item.img">
					<p>{{item.txt}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Service',
		data(){
			return{
				list:[
					{id:1,img:'userimg/a-1.png',txt:"常用收货地址"},
					{id:2,img:'userimg/a-2.png',txt:"常用出行人"},
					{id:3,img:'userimg/a-3.png',txt:"修改密码"},
					{id:4,img:'userimg/a-4.png',txt:"在线客服"},
					{id:5,img:'userimg/a-5.png',txt:"游侠客APP"}
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black
	}
	.service{
		width: 100%;
		height: 6.4rem;
	}
	.service h3{
		text-indent: 1em;
		line-height: 1.2rem;
		font-size: .5rem;
		font-weight: bold;
		width: 50%;
	}
	.service ul{
		width: 100%;
	}
	.service ul li{
		width: 25%;
		text-align: center;
		float: left;
		height: 2rem;
	}
	.service img{
		width: .7rem;
	}
	.service p{
		margin-top: .3rem;
	}
</style>
